<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <div class="tagBox" v-for="(i,index) in queryList" :key="index">
          <div>{{ i.name }}</div>
          <div>
            <div
              v-for="(i, k) in i.children"
              :key="k"
              class="tagItem"
              :class="{ checkTag: i.checked }"
              @click="handleCheckType(index,k)"
            >
              {{ i.label }}
            </div>
          </div>
        </div>
      </Row>
      <div class="searchBox">
        <Input
          search
          v-model="searchForm.searchFiled"
          placeholder="课程名称/课程编号/上传人搜索"
          @on-enter="handleSearch"
          @on-search="handleSearch"
          style="width: 100%"
        />
      </div>
      <Row style="margin-top: 10px">
        <Col span="6">
          <Button
            type="success"
            :disabled="isDisabled"
            @click="handleJudge(null, 'success')"
            >批量通过</Button
          >
          <Button
            type="error"
            :disabled="isDisabled"
            @click="handleJudge(null, 'error')"
            style="margin-left: 20px"
            >批量驳回</Button
          >
        </Col>
        <Col span="18" style="text-align: right">
          <RadioGroup
            v-model="searchForm.sourceType"
            @on-change="handleSearch"
            button-style="solid"
            type="button"
            style="margin-right: 20px"
          >
            <Radio v-for="(i, k) in sourceList" :key="k" :label="i.value">{{
              i.label
            }}</Radio>
          </RadioGroup>
          <RadioGroup
            v-model="searchForm.status"
            @on-change="handleSearch"
            button-style="solid"
            type="button"
          >
            <Radio v-for="(i, k) in statusList" :key="k" :label="i.value">{{
              i.label
            }}</Radio>
          </RadioGroup></Col
        >
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
        @on-selection-change="changeSelect"
      >
        <template slot-scope="{ row }" slot="apply">
          <div>{{ row.auditTime }}</div>
          <Tooltip :content="row.remark" placement="left" max-width="300">
            {{ row.remark?.length > 20 ? row.remark.substr(0, 20)+ '...' : row.remark }}
          </Tooltip>
      </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.rows"
          @on-change="changePage"
          @on-page-size-change="changerows"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        />
      </Row>
    </Card>
    <Modal
      v-model="judgeFlag"
      :title="judgeResult == 'success' ? '审核通过' : '审核不通过'"
    >
      <Form ref="judgeForm" :model="judgeForm" :rules="judgeRule" :label-width="100">
        <FormItem label="审核意见" prop="remark" style="width: 100%">
          <Input
            v-model="judgeForm.remark"
            type="textarea"
            :rows="5"
            :maxlength="300"
            placeholder="请输入审核意见"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="judgeFlag = false">取消</Button>
        <Button type="primary" @click="submitForm">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Approval from "@/api/special.js";

export default {
  name: "approval",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        page: 1,
        rows: 10,
        searchFiled: null, // 模糊关键字
        courseCategory: [], // 课程类型 + 人群
        sourceType: null, // 资源类型
        status: null, // 审核状态
      },
      queryList: [], // 查询条件
      typeList: [], //类型列表
      crowdList: [], // 人群列表
      sourceList: [
        // 资源列表
        { value: null, label: "全部" },
        { value: 0, label: "视频课题" },
        { value: 1, label: "音频课题" },
        { value: 2, label: "图文课题" },
      ],
      statusList: [
        // 审核状态列表
        { value: null, label: "全部" },
        { value: 1, label: "待审核" },
        { value: 2, label: "已通过" },
        { value: 3, label: "已驳回" },
        { value: 4, label: "已上架" },
        { value: 5, label: "已下架" },
      ],
      columns: [
        // 表头
        { type: "selection", width: 60, align: "center" },
        { title: "序号", minWidth: 80, type: "index" },
        {
          title: "课程",
          minWidth: 400,
          tooltip: true,
          render: (h, params) => {
            let label = '--';
            if (params.row.courseTypeStr == 0) label = '视频课题';
            if (params.row.courseTypeStr == 1) label = '音频课题';
            if (params.row.courseTypeStr == 2) label = '图文课题';
            return h("div", { style: { display: "flex" } }, [
              h("img", {
                attrs: { src: params.row.courseCover },
                style: { width: "100px", marginRight: "10px" },
              }),
              h("div", { style: { margin: "auto 0 auto 0" } }, [
                h("span", {}, label),
                h("span", { style:{ margin: "0 10px" } }, "|"),
                h("span", {}, params.row.courseSeriesName),
                h("span", { style: { display: "block" } }, params.row.courseCode),
              ]),
            ]);
          },
        },
        { title: "上传人", key: "expertName", minWidth: 120, tooltip: true },
        { title: "上传时间", key: "createTime", minWidth: 180, tooltip: true },
        {
          title: "课程状态",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            let label = "未提交";
            let color = "#cccccc";
            if (params.row.courseStatus == 1) {
              label = "待审核";
              color = "#F59A23";
            }
            if (params.row.courseStatus == 2) {
              label = "已通过";
              color = "#68CABE";
            }
            if (params.row.courseStatus == 3) {
              label = "已驳回";
              color = "#FF5C58";
            }
            if (params.row.courseStatus == 4) {
              label = "已上架";
              color = "#66CC33";
            }
            if (params.row.courseStatus == 5) {
              label = "已下架";
              color = "#AAAAAA";
            }
            return h("div", [
              h("div", {
                style: {
                  display: "inline-block",
                  width: "8px",
                  height: "8px",
                  backgroundColor: color,
                  marginRight: "6px",
                  borderRadius: "50%",
                },
              }),
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "课程审核",
          tooltip: true,
          minWidth: 300,
          slot:"apply"
        },
        {
          title: "置顶",
          align: "center",
          minWidth: 120,
          render: (h, params) => {
            let label = params.row.pageTop == 0 ? "置顶" : "取消置顶";
            let isShow = params.row.courseStatus == 4;
            return isShow ? this.btnDom(h, null, label, "handleTop", params) : "";
          },
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (params.row.courseStatus == 1) {
              func.push(this.btnDom(h, "success", "通过", "handleJudge", params, false));
              func.push(this.btnDom(h, "error", "驳回", "handleJudge", params, false));
            }
            func.push(this.btnDom(h, "error", "查看", "handleView", params, true));
            return h(
              "div",
              { style: { display: "flex", justifyContent: "center" } },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectList: [], // 多选数据
      judgeFlag: false, //审核弹窗
      judgeResult: "success", //审核结果
      isDisabled: false, // 是否禁止点击
      judgeForm: {
        // 审核表单
        remark: "",
      },
      judgeRule: {
        // 验证规则
        remark: [{ required: true, message: "请输入审核意见" }],
      },
    };
  },
  watch: {
    judgeFlag(val) {
      if (val) this.$refs.judgeForm.resetFields();
    },
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getData();
    },
    // 分页 改变页数
    changerows(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.searchForm.rows = 10;
      this.getData();
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row, type);
            },
          },
        },
        label
      );
    },
    // 选择课程类型
    handleCheckType(index, k) {
      this.queryList[index].children.forEach((i, c) => {
        if (k == c) i.checked = !i.checked;
      });
      let list = [];
      this.queryList.forEach(a => {
        a.children.forEach((c) => {
          if (c.checked) list.push(c.value)
        });
      })
      this.searchForm.courseCategory = list;
      this.getData();
    },
    //多选
    changeSelect(e) {
      this.selectList = e;
      this.isDisabled = e.some((i) => i.courseStatus != 1);
    },
    // 置顶
    handleTop(row) {
      let label = row.pageTop == 0 ? "置顶" : "取消置顶";
      this.$Modal.confirm({
        title: label,
        content: "<p>确认是否" + label + "吗？</p>",
        onOk: () => {
          if (row.pageTop == 0) {
            let params = {
              courseSeriesId: row.courseSeriesId,
              expertId: row.expertId,
            };
            API_Approval.postCourseTop(params).then((res) => {
              if (res.success) {
                this.$Message.success("置顶成功");
                this.getData();
              }
            });
          } else {
            let params = {
              courseSeriesId: row.courseSeriesId,
              expertId: row.expertId,
            };
            API_Approval.postCancelCourseTop(params).then((res) => {
              if (res.success) {
                this.$Message.success("置顶已取消");
                this.getData();
              }
            });
          }
        },
      });
    },
    // 查看
    handleView(row) {
      this.$router.push({
        name: "course-detail",
        query: { id: row.courseSeriesId },
      });
    },
    // 打开审核弹窗
    handleJudge(row, v) {
      this.judgeResult = v;
      if (row) {
        this.judgeForm = Object.assign({}, row);
        this.judgeFlag = true;
      } else {
        if (this.selectList.length) {
          this.judgeFlag = true;
        } else {
          this.$Message.success("请先勾选数据");
        }
      }
    },
    // 提交审核结果
    submitForm() {
      this.$refs.judgeForm.validate((valid) => {
        if (valid) {
          let ids = "";
          if (this.selectList.length) {
            // 批量
            ids = this.selectList
              .map((i) => {
                return i.id;
              })
              .join(",");
          } else {
            // 单个提交
            ids = this.judgeForm.id;
          }
          let params = {
            id: ids,
            remark: this.judgeForm.remark,
            status: this.judgeResult == "success" ? 2 : 3,
          };
          API_Approval.postDealBat(params).then((res) => {
            if (res.success) {
              this.$Message.success("操作成功");
              this.judgeFlag = false;
              this.judgeForm = { remark: null };
              this.getData();
            }
          });
        }
      });
    },
    // 获取筛选条件
    getCurriculumType() {
      API_Approval.getColumnType().then((res) => {
        if (res.success) {
          let list = [];
          res.result.forEach((item) => {
            let obj = {
              name: item.name,
              children: item.leafList.map((m) => {
                return { value: m.id, label: m.name, checked: false };
              })
            };
            list.push(obj);
          });
          this.queryList = list;
        }
      });
    },
    //查询课程列表
    getData() {
      this.data = [];
      let params = Object.assign({}, this.searchForm);
      params.courseCategory = params.courseCategory.join(",");

      this.loading = true;
      API_Approval.postColumnPage(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.list;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
  created() {
    this.getCurriculumType();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.search {
  position: relative;
  .searchBox {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 350px;
    height: 32px;
    border-radius: 20px;
    background-color: #f2f2f2;
    overflow: hidden;
    ::v-deep(.ivu-input) {
      background-color: transparent;
      border: 1px solid transparent;
    }
  }
}
.tagBox {
  display: flex;
  width: calc(100vw - 600px);
  >div:first-child {
    width: 100px;
    height: 32px;
    line-height: 32px;
    margin-right: 16px;
    text-align: right;
    // text-align: justify;
    // text-justify: distribute-all-lines; // ie
    // text-align-last: justify;
    // &::after{
    //   content:'';
    //   display:inline-block;
    //   overflow:hidden;
    //   width:100%;
    //   height: 0;
    // }
  }
  >div:last-child {
    flex: 1;
  }
}
.tagItem {
  user-select: none;
  display: inline-block;
  border: 1px solid #e7e7e7;
  text-align: center;
  min-width: 90px;
  padding: 6px 15px;
  margin: 0 10px 10px 0;
  color: #888888;
  border-radius: 6px;
  &:hover {
    cursor: pointer;
    color: #5dd6c9;
    border: 1px solid #5dd6c9;
  }
}
.checkTag {
  color: #5dd6c9;
  background-color: #edfaf9;
  border: 1px solid #caf1ed;
}
.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  p {
    font-weight: bold;
    margin: 20px 0;
    color: #000;
  }
  p::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 18px;
    vertical-align: top;
    border-radius: 2px;
    margin-left: 40px;
    margin-right: 20px;
    background-color: #ff0000;
  }
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .tag-refund {
    display: inline-block;
    padding: 8px 12px;
    margin-left: 20px;
    border: 1px dashed #f00;
    border-radius: 6px;
    color: #f00;
  }
  .imgs {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    border-radius: 8px;
    overflow: hidden;
  }
  .result {
    position: absolute;
    left: 50%;
    top: 30%;
    border-radius: 50%;
    overflow: hidden;
    img {
      margin: 0;
    }
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
